<template>
    <div class="layerRtbContain cover">
        <!-- 切换标题 (定位) -->
        <div class="clearfix list-title" style="position: absolute;top: 0px;left: 0px;">
            <ul class="uiTab3 fl">
                <li :class="[listIndex === index ? 'uiTab3-active' : '']" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)"><a href="javascript:">{{item}}</a></li>
            </ul>
        </div>
        <div>
            <!-- 订单列表 -->
            <rx-order-list v-if="listIndex === 0" ></rx-order-list>
            <!-- 罚款列表 -->
            <rx-fine-list v-if="listIndex === 1" ></rx-fine-list>
            <!-- 材料商列表列表 -->
            <rx-mardelivery-list v-if="listIndex === 2" ></rx-mardelivery-list>
        </div>
    </div>
</template>
<script>
import rxOrderList from './list/orderList'
import rxFineList from './list/fine'
import rxMardeliveryList from './list/marDelivery'

export default {
    components: {
        rxOrderList,
        rxFineList,
        rxMardeliveryList
    },
    data () {
        return {
            tabList: ['订单统计', '罚款统计', '材料配比'], // 列表数组
            listIndex: 0 // listIndex值
        }
    },
    created () {
    },
    methods: {
        // tab 切换
        tabClick (index) {
            this.listIndex = index
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        }
    }
}
</script>
